<script setup lang="ts">
import type { IUserInfo, IUserLevel } from "@/simba/types/user.d"
	const props = defineProps<{
		userInfo: IUserInfo
	}>()
	// console.log('props.userInfo',  props.userInfo)
</script>

<template>
	<view class="user">
		<up-image v-if="props.userInfo.avatar" :show-loading="true" :src="props.userInfo.avatar" radius= 10 width="80px" height="80px"></up-image>
		<up-image v-else :show-loading="true" src="/static/images/默认头像.svg" radius= 10 width="80px" height="80px"></up-image>
		
		<view class="info">
			<span>{{props.userInfo.nickname}}</span>
			<span>{{props.userInfo.mobile}}</span>
			<span v-if="props.userInfo.level">{{props.userInfo.level.name}}</span>
		</view>
	</view>
	<slot/>
</template>

<style lang="scss">
	.user{
		background-color: #fff;
		margin: 10rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-radius: 16rpx;
		
		.info{
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: start;

			border: red 1rpx solid;
		}
	}
</style>
